<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <!-- 引入 引入开发版本的 -->
  <script src="../day02/node_modules/vue/dist/vue.js"></script>
  <link rel="stylesheet" href="../day02/node_modules/bootstrap/dist/css/bootstrap.min.css">
  <style>
    /* 防止闪屏 */
    [v-cloak] {
      display: none;
    }

    .container {
      margin: 20px auto;
    }

    .table {
      text-align: center;
      vertical-align: middle;
    }

    img {
      width: 100px;
      height: 100px;
    }

    .btn1 {
      width: 30px;
      height: 30px;
      border: none;
      border-radius: 5px;
    }

    .imgIco {
      width: 50px;
      height: 50px;
    }
  </style>
</head>

<body>
  <!-- 容器 -->
  <div id="app" class="container">
    <div class="h3 text-center" style="color: rgb(0, 112, 252);">购物车列表</div>
    <table class="table table-condensed">
      <tr>
        <td>#</td>
        <td>商品名称</td>
        <td>单价</td>
        <td>数量</td>
        <td>小计</td>
        <td>操作</td>
      </tr>
      <tr v-for="(item,index) in goods">
        <td>
          <img class="imgIco" :src="item.checked?'./images/ico1.png':'./images/ico2.png'" @click="item.checked = !item.checked"
            alt="">
        </td>
        <td>
          <img :src="item.goodImg" alt="">
          <br>
          {{item.goodName}}
        </td>
        <td>{{item.price}}</td>
        <td>
          <button class="btn1" @click="sub(index)" style="background-color: rgb(0, 205, 242);">-</button>
          {{item.num}}
          <button class="btn1" @click="add(index)" style="background-color: rgb(0, 112, 252);">+</button>
        </td>
        <td>￥{{item.price*item.num}}</td>
        <td>
          <button type="button" class="btn btn-danger" @click="del(index)">删除</button>
        </td>
      </tr>
      <tr>
        <td colspan="6">总计：￥{{total}}</td>
      </tr>
      <tr v-if="goods.length>0">
        <td colspan="6">
          <!-- 绑定全部删除的事件 @click="delAll" -->
          <button type="button" class="btn btn-danger" @click="delAll">全部删除</button>
        </td>
      </tr>
      <tr v-else>
        <td colspan="6">
          暂无数据
        </td>
      </tr>
    </table>
  </div>

  </div>

  <!-- 逻辑操作 -->
  <script>
    new Vue({
      // 挂载点
      el: '#app',
      // 存放数据、变量
      data: {
        goods: [
          {
            id: 1,
            goodName: "电脑",
            goodImg: "https://img14.360buyimg.com/n1/s450x450_jfs/t1/188980/7/5321/177071/60af6721Ebd46b254/44e36544d47facf5.jpg",
            price: 2999,
            num: 1,
            checked: true
          },
          {
            id: 2,
            goodName: "衣服",
            goodImg: "https://img14.360buyimg.com/n0/jfs/t1/120364/23/17531/89741/5fa2458cE6ed14057/ecd7eebb94c05e82.jpg",
            price: 399,
            num: 1,
            checked: false
          },
          {
            id: 3,
            goodName: "口红",
            goodImg: "https://img12.360buyimg.com/n1/jfs/t1/179930/25/10503/344307/60d17434Efa9ead99/cf85cf334b808a9e.jpg",
            price: 350,
            num: 1,
            checked: false
          },
          {
            id: 4,
            goodName: "大粉水",
            goodImg: "https://img14.360buyimg.com/n2/jfs/t1/120393/34/12328/135980/5f5b6bbfE7cd1a597/c1583f0e3e91ded4.jpg!q80.webp",
            price: 1999,
            num: 1,
            checked: true
          },
        ],
        total: 4998,
      },
      watch: {
        goods: {
          deep: true, // 深度监听
          handler(newValue, oldValue) {
            this.total = 0;
            for (let i = 0; i < this.goods.length; i++) {
              if (this.goods[i].checked) {
                this.total += (this.goods[i].num * this.goods[i].price) * 1;
              }
            }
          }
        }
      },
      // 存放方法
      methods: {
        del(index) {
          this.goods.splice(index, 1)
        },
        delAll() {
          this.goods = [];
        },
        add(index) {
          this.goods[index].num++;
        },
        sub(index) {
          if (this.goods[index].num == 1) {
            return;
          }
          this.goods[index].num--;
        },


      }
    })
  </script>
</body>

</html>